
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuowu"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-cuowu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque1"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wrong"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-wrong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jilu"></i>
                    <div class="name">记录</div>
                    <div class="fontclass">.icon-jilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tips2"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-tips2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chedaisolid"></i>
                    <div class="name">车贷_Solid</div>
                    <div class="fontclass">.icon-chedaisolid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhe1"></i>
                    <div class="name">审核</div>
                    <div class="fontclass">.icon-shenhe1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontremind"></i>
                    <div class="name">催</div>
                    <div class="fontclass">.icon-iconfontremind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-icon-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yixiangdengji"></i>
                    <div class="name">意向登记</div>
                    <div class="fontclass">.icon-yixiangdengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refuseOrder"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-refuseOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-c-collection"></i>
                    <div class="name">上门催收</div>
                    <div class="fontclass">.icon-c-collection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-messageRecovery"></i>
                    <div class="name">留言</div>
                    <div class="fontclass">.icon-messageRecovery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redCopy"></i>
                    <div class="name">抵押</div>
                    <div class="fontclass">.icon-redCopy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiandailixi"></i>
                    <div class="name">建贷利息</div>
                    <div class="fontclass">.icon-jiandailixi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kxbcustomers"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-kxbcustomers</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujue"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-jujue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetong"></i>
                    <div class="name">合同</div>
                    <div class="fontclass">.icon-hetong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangda"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-fangda</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetong7"></i>
                    <div class="name">合同7</div>
                    <div class="fontclass">.icon-hetong7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pendingContract"></i>
                    <div class="name">合同11</div>
                    <div class="fontclass">.icon-pendingContract</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconznxxbig"></i>
                    <div class="name">站内消息big</div>
                    <div class="fontclass">.icon-iconznxxbig</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caiwu"></i>
                    <div class="name">财务</div>
                    <div class="fontclass">.icon-caiwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-riqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sunhuai"></i>
                    <div class="name">损坏</div>
                    <div class="fontclass">.icon-sunhuai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huankuanrili"></i>
                    <div class="name">还款日历</div>
                    <div class="fontclass">.icon-huankuanrili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-minus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanche"></i>
                    <div class="name">还车</div>
                    <div class="fontclass">.icon-huanche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyeshouye"></i>
                    <div class="name">首页-首页</div>
                    <div class="fontclass">.icon-shouyeshouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1301"></i>
                    <div class="name">资金明细</div>
                    <div class="fontclass">.icon-icon1301</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huifangguanli"></i>
                    <div class="name">回访管理</div>
                    <div class="fontclass">.icon-huifangguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Customer"></i>
                    <div class="name">客户管理</div>
                    <div class="fontclass">.icon-Customer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jisudaozhang"></i>
                    <div class="name">极速到账</div>
                    <div class="fontclass">.icon-jisudaozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oneLoanLater"></i>
                    <div class="name">贷后管理</div>
                    <div class="fontclass">.icon-oneLoanLater</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oneLoanBefore"></i>
                    <div class="name">贷前管理</div>
                    <div class="fontclass">.icon-oneLoanBefore</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oneLoanIng"></i>
                    <div class="name">贷中管理</div>
                    <div class="fontclass">.icon-oneLoanIng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi1"></i>
                    <div class="name">逾期</div>
                    <div class="fontclass">.icon-riqi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huankuan"></i>
                    <div class="name">还款</div>
                    <div class="fontclass">.icon-huankuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin1"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishenhe"></i>
                    <div class="name">待审核</div>
                    <div class="fontclass">.icon-daishenhe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangkuanqueren"></i>
                    <div class="name">放款确认</div>
                    <div class="fontclass">.icon-fangkuanqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaoediya"></i>
                    <div class="name">超额抵押</div>
                    <div class="fontclass">.icon-chaoediya</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehu"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-kehu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alreadyOrder"></i>
                    <div class="name">客户洞察</div>
                    <div class="fontclass">.icon-alreadyOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">站内信</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangluotiaocha"></i>
                    <div class="name">网络调查</div>
                    <div class="fontclass">.icon-wangluotiaocha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daiban"></i>
                    <div class="name">待办</div>
                    <div class="fontclass">.icon-daiban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuzhijiagou"></i>
                    <div class="name">组织架构</div>
                    <div class="fontclass">.icon-zuzhijiagou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhishizhongxin"></i>
                    <div class="name">知识中心</div>
                    <div class="fontclass">.icon-zhishizhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhibiao"></i>
                    <div class="name">指标</div>
                    <div class="fontclass">.icon-zhibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changyongziliao"></i>
                    <div class="name">常用资料</div>
                    <div class="fontclass">.icon-changyongziliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengdaitijiao"></i>
                    <div class="name">等待提交</div>
                    <div class="fontclass">.icon-dengdaitijiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money_deposit"></i>
                    <div class="name">押金补缴</div>
                    <div class="fontclass">.icon-money_deposit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinggu"></i>
                    <div class="name">评估</div>
                    <div class="fontclass">.icon-pinggu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhangdan"></i>
                    <div class="name">账单结清</div>
                    <div class="fontclass">.icon-zhangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luruxinxi"></i>
                    <div class="name">录入信息</div>
                    <div class="fontclass">.icon-luruxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-updown"></i>
                    <div class="name">上下</div>
                    <div class="fontclass">.icon-updown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-savedOrder"></i>
                    <div class="name">订单 (3)</div>
                    <div class="fontclass">.icon-savedOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianzhengyajin"></i>
                    <div class="name">签证押金</div>
                    <div class="fontclass">.icon-qianzhengyajin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dian"></i>
                    <div class="name">点</div>
                    <div class="fontclass">.icon-dian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renegeOrder"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-renegeOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oneFinance"></i>
                    <div class="name">财务</div>
                    <div class="fontclass">.icon-oneFinance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daozhangqueren"></i>
                    <div class="name">到账确认</div>
                    <div class="fontclass">.icon-daozhangqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaoqin"></i>
                    <div class="name">考勤</div>
                    <div class="fontclass">.icon-kaoqin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-judan"></i>
                    <div class="name">拒单</div>
                    <div class="fontclass">.icon-judan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoOrderIn"></i>
                    <div class="name">学分录入</div>
                    <div class="fontclass">.icon-twoOrderIn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-appliedOrder"></i>
                    <div class="name">已审批</div>
                    <div class="fontclass">.icon-appliedOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-backIcon"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-backIcon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nextIcon"></i>
                    <div class="name">下一步</div>
                    <div class="fontclass">.icon-nextIcon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoBadList"></i>
                    <div class="name">坏账</div>
                    <div class="fontclass">.icon-twoBadList</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houseService"></i>
                    <div class="name">服务</div>
                    <div class="fontclass">.icon-houseService</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-financeDetail"></i>
                    <div class="name">明细</div>
                    <div class="fontclass">.icon-financeDetail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-breakOrder"></i>
                    <div class="name">钱4</div>
                    <div class="fontclass">.icon-breakOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoAlreadyClear"></i>
                    <div class="name">已结算的体育投注</div>
                    <div class="fontclass">.icon-twoAlreadyClear</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-repaymentDetailed"></i>
                    <div class="name">预算明细</div>
                    <div class="fontclass">.icon-repaymentDetailed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stayOrder"></i>
                    <div class="name">监督检验所oa设计-请假申请</div>
                    <div class="fontclass">.icon-stayOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-signContract"></i>
                    <div class="name">合同录入</div>
                    <div class="fontclass">.icon-signContract</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoRecheckAccount"></i>
                    <div class="name">到账登记</div>
                    <div class="fontclass">.icon-twoRecheckAccount</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoHouseProperty"></i>
                    <div class="name">房产税</div>
                    <div class="fontclass">.icon-twoHouseProperty</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hurryBack"></i>
                    <div class="name">催收操作 copy 2</div>
                    <div class="fontclass">.icon-hurryBack</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-applyOrder"></i>
                    <div class="name">待审批</div>
                    <div class="fontclass">.icon-applyOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-oneCustomer"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-oneCustomer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-closeDown"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-closeDown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoDepositManage"></i>
                    <div class="name">押金</div>
                    <div class="fontclass">.icon-twoDepositManage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-visitOrder"></i>
                    <div class="name">客户回访查询</div>
                    <div class="fontclass">.icon-visitOrder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-todayPayback"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-todayPayback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-contractNumber"></i>
                    <div class="name">合同管理</div>
                    <div class="fontclass">.icon-contractNumber</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoNormalRepayment"></i>
                    <div class="name">还款 (1)</div>
                    <div class="fontclass">.icon-twoNormalRepayment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoOverdueRepayment"></i>
                    <div class="name">逾期</div>
                    <div class="fontclass">.icon-twoOverdueRepayment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-waitLoan"></i>
                    <div class="name">等待放款</div>
                    <div class="fontclass">.icon-waitLoan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-twoDocumentTemplate"></i>
                    <div class="name">ICA图标_文档中心</div>
                    <div class="fontclass">.icon-twoDocumentTemplate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ppt"></i>
                    <div class="name">ppt</div>
                    <div class="fontclass">.icon-ppt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-WORD"></i>
                    <div class="name">WORD</div>
                    <div class="fontclass">.icon-WORD</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-historicalContract"></i>
                    <div class="name">历史合同</div>
                    <div class="fontclass">.icon-historicalContract</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rightArrow"></i>
                    <div class="name">1-下一步</div>
                    <div class="fontclass">.icon-rightArrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-downArrow"></i>
                    <div class="name">箭头1-下</div>
                    <div class="fontclass">.icon-downArrow</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
